<template>
	<view>
		<!-- 选项卡 -->
		<view class="flex align-center py-2">
			<view v-for="(item, index) in tabBars" :key="index" class="flex flex-1 align-center justify-center" :class="item.index === tabIndex ? 'font-lg font-weight-bold text-main' : 'font-md'"
			 @click="changeTab(index)">
				{{item.name}} {{item.num}}
			</view>
		</view>
		<!-- 列表 -->
		<swiper :duration="150" :current="tabIndex" @change="onChangeTab" :style="'height:'+scrollH+'px;'">
			<!-- @scrolltolower：scroll组件的触底事件 -->
			<swiper-item v-for="(item,index) in newsList" :keys="index">
				<scroll-view scroll-y="true" :style="'height:'+scrollH+'px;'" @scrolltolower="loadmore(index)">
					<!-- 有数据的时候才显示上拉加载更多 -->
					<template v-if="item.list.length > 0">
						<!-- 列表显示 -->
						<block v-for="(item2,index2) in item.list" :key="index2">
							<!-- 列表样式 -->
							<user-list :item="item2" :index="index2"></user-list>
						</block>
						<!-- 上拉加载 -->
						<load-more :loadmore="item.loadmore"></load-more>
					</template>
					<!-- 没有数据的时候显示无数据 -->
					<template v-else>
						<no-thing></no-thing>
					</template>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	const demo = [{
		avatar: '/static/default.jpg',
		username: '昵称',
		sex: 0, // 0 未知，1 女，2 男
		age: 24,
		isFollow: true
	}, {
		avatar: '/static/default.jpg',
		username: '昵称',
		sex: 1,
		age: 24,
		isFollow: false
	}, {
		avatar: '/static/default.jpg',
		username: '昵称',
		sex: 2,
		age: 24,
		isFollow: false
	}]
	import commonList from '@/components/common/common-list.vue'
	import loadMore from '@/components/common/loadmore.vue'
	import noThing from '@/components/common/no-thing.vue'
	import userList from '@/components/user-list/user-list.vue'
	export default {
		components: {
			commonList,
			loadMore,
			noThing,
			userList
		},
		data() {
			return {
				// 列表高度
				scrollH: 600,
				// 顶部选项卡
				scrollInto: "",
				// 当前选中的选项卡
				tabIndex: 0,
				tabBars: [{
					name: '互关',
					index: 0,
					num: 0,
				}, {
					name: '关注',
					index: 1,
					num: 1,
				}, {
					name: '粉丝',
					index: 2,
					num: 20,
				}],
				newsList: []
			}
		},
		onNavigationBarButtonTap() {
			uni.navigateBack({
				delta: 1
			});
		},
		// 监听原生导航搜索框点击事件
		onNavigationBarSearchInputClicked() {
			uni.navigateTo({
				url: '../search/search?type=user'
			});
		},
		onLoad() {
			let systemInfo = uni.getSystemInfoSync()
			this.scrollH = systemInfo.windowHeight - uni.upx2px(101)
			// 根据选项卡生成列表
			this.getData()
		},
		methods: {
			// 切换选项卡
			changeTab(index) {
				this.tabIndex = index
			},
			// 获取数据
			getData() {
				var arr = []
				for (let i = 0; i < this.tabBars.length; i++) {
					// 生成列表模板
					let obj = {
						// 1.上拉加载更多 2.加载中... 3.没有更多了
						loadmore: "上拉加载更多",
						list: []
					}
					// 只有前两个导航菜单中的列表有数据，其他的都没有数据
					if (i < 2) {
						obj.list = demo
					}
					arr.push(obj)
				}
				this.newsList = arr
			},
			// 监听滑动事件
			onChangeTab(e) {
				this.changeTab(e.detail.current)
			},
			changeTab(index) {
				if (this.tabIndex === index) {
					return;
				}
				this.tabIndex = index
				this.scrollInto = 'tab' + index
			},
			loadmore(index) {
				// 拿到当前列表
				let item = this.newsList[index]
				// 判断是否处理可加载状态(上拉加载更多)
				if (item.loadmore !== '上拉加载更多') return;
				// 修改当前列表加载状态
				item.loadmore = '加载中...'
				// 模拟数据请求
				setTimeout(() => {
					// 加载数据(使用ES6的扩展运算符将数组元素合并来模拟假数据)
					item.list = [...item.list, ...item.list]
					// 恢复加载状态
					item.loadmore = '上拉加载更多...'
				}, 2000)
			}
		}
	}
</script>

<style>

</style>
